<template>
    <div>
        <headerView class="header">
            <template v-slot:center>
                <span class="title">我要开店</span>
            </template>
        </headerView>
        <!-- 流程介绍 -->
        <div class="content">
            <div class="flow">
                <span>商家开店流程</span>
                <div class="flow_con">
                    <div class="flow_con_dot" v-for="(item) in flowLIst" :key="item.id">
                        <div class="background"><span>{{item.id}}</span></div>
                        <span>{{item.title}}</span>
                    </div>
                </div>
            </div>
            <p class="remind">您需要准备一下材料：</p>
            <!-- 需要准备的材料 -->
            <div>
                <div class="material" v-for="(item, index) in list" :key="index">
                    <img :src="item.img" alt="材料图片">
                    <span>
                        <strong class="ti">{{item.title}}</strong>
                        <br>
                        <br>
                        <span>{{item.content}}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_con">
                <div class="gree_box">
                    <input type="radio" name="gree" @click="changeGree">
                    <span class="gree_text">
                        <span class="text1">我已阅读并同意签署</span>
                        <router-link to="/userAgreement">
                            <span class="text2">《开店说明》</span>
                        </router-link>
                    </span>
                </div>
                <!-- 我要开店按钮 -->
                <van-button round class="btn" :disabled="checkedState" @click="goShop">我准备好了</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { materialLIst } from "../../allData/shopHelpData/material";
import headerView from "../../components/headerView.vue";
export default {
    components: { headerView },
    data() {
        return {
            flowLIst: [
                {
                    id: 1,
                    title: "提交资料",
                },
                {
                    id: 2,
                    title: "平台审核",
                },
                {
                    id: 3,
                    title: "开始营业",
                },
            ],
            list: "",
            checkedState: true,
        }
    },
    created() {
        this.list = materialLIst
    },
    methods: {
        changeGree() {
            this.checkedState = !event.target.checked
        },
        goShop() {
            this.$router.push('/ChangeCategory')
        }
    }
}
</script>

<style scoped>
/* 头部 */
.header {
    position: fixed;
    top: 0;
    z-index: 999;
}

/* 我要开店 */
.title {
    margin: 0 auto;
}

/* 内容盒子 */
.content {
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 20%;
}

/* 流程盒子 */
.flow {
    margin-top: 10px;
    width: 100%;
    height: 150px;
    background-color: #f7f7f7;
    border-radius: 15px;
}

.flow span {
    font-size: 15px;
    padding: 10px 20px;
    width: 90%;
    text-align: center;
}

.flow_con {
    margin-top: 20px;
    display: flex;
}

.flow_con_dot {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
}

.background {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ff6e53;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background span {
    color: #ffff;
    font-size: 25px;
}

.remind {
    font-size: 16px;
    color: #444343;
    margin: 30px 0;
}

/* 需要准备的材料 */
.material {
    margin: 40px 0;
    display: flex;
    align-items: center;
}

.material span {
    font-size: 14px;
    margin-left: 10px;
}

.material img {
    width: 135px;
    height: 90px;
    border-radius: 10px;
}

/* 同意协议 */
.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #ffff;
}
.footer_con{
    width: 90%;
    margin: 0 auto;
}
.gree_box {
    padding: 15px 0;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.text1 {
    color: #a8a7a9;
}

.text2 {
    color: #ff6e53;
    font-size: 15px;
}

.btn {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
    margin-bottom: 10px;
}
</style>